<template>
  <div>

    <div style="padding: 10px 0px;line-height: 2.15;">
      <el-row>
        <el-col :span="2">上报类型:月报</el-col>
        <el-col :span="2">年份:2020</el-col>
        <el-col :span="2">时间:11月</el-col>
        <el-col :span="3">单位名称:内蒙古博物院</el-col>
		<el-col :span="3"><el-tag type="success">已审</el-tag></el-col>
		

      </el-row>
    </div>

    <div>
      <el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%" @row-click="handleCurrentChange">
        <el-table-column align="center" label="能耗编码" width="80">
          <template slot-scope="{row}">
            <span>{{ row.id }}</span>
          </template>
        </el-table-column>

        <el-table-column min-width="100px" align="left" label="能耗名称">
          <template slot-scope="{row}">
            <span>用地面积{{ row.author }}</span>
          </template>
        </el-table-column>

        <el-table-column width="180px" align="center" label="计量单位">
          <template>
            <span>平方米</span>
          </template>
        </el-table-column>

        <el-table-column width="100px" label="汇总编号" align="center">
          <template slot-scope="{row}">
            <span>{{ row.id }}</span>
          </template>
        </el-table-column>

        <el-table-column width="100px" label="数量" align="center">
          <template scope="{row}">
            <el-input v-model="row.id" size="small" placeholder="请输入内容" @change="handleEdit(row.$index, row)" />
          </template>
        </el-table-column>
      </el-table>
    </div>
	
	<el-row>
	  <el-col :span="12">
	    <div style="float: left;">
	      <el-button type="primary" @click="onSubmit">保存</el-button>
	      <el-button type="primary" @click="onSubmit">打印</el-button>
	      <el-button type="primary" @click="onSubmit">导出excel</el-button>
	      <el-button>取消</el-button>
	    </div>
	  </el-col>
	  <el-col :span="12">
	    <div style="float: right;">
	      <el-button type="success" plain @click="onSubmit">审核通过</el-button>
	      <el-button type="danger" plain @click="onSubmit">审核不通过</el-button>
	    </div>
	  </el-col>
	</el-row>
	
  </div>
</template>

<script>
import { fetchList } from '@/api/article'

export default {
  name: 'CreateBaseInfo4',
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: null,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 10
      },
      options: [{
        value: '机房1',
        label: '机房1'
      }, {
        value: '选项2',
        label: '机房2'
      }, {
        value: '选项3',
        label: '机房3'
      }, {
        value: '选项4',
        label: '机房4'
      }, {
        value: '选项5',
        label: '机房5'
      }],
      value: ''
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      this.listLoading = true
      const { data } = await fetchList(this.listQuery)
      const items = data.items
      this.list = items.map(v => {
        this.$set(v, 'edit', false) // https://vuejs.org/v2/guide/reactivity.html
        v.originalTitle = v.title //  will be used when user click the cancel botton
        return v
      })
      this.listLoading = false
    },
    handleCurrentChange(row, event, column) {
      console.log(row, event, column, event.currentTarget)
    },
    handleEdit(index, row) {
      console.log(index, row)
    },
    handleDelete(index, row) {
      console.log(index, row)
    }
  }
}
</script>

<style scoped>

.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}

.el-row{
	text-align: center;
	font-size: 18px;
	padding: 10px 0px;
}

</style>
